import { IconRight } from "@arco-design/web-react/icon";
import React from "react";

const CardList = () => {
  const list = [
    {
      title: ["豆包·", <span className="colorText">视频生成</span>, "模型"],
      icon: "/icon1.png",
      context:
        "通过精准语义理解，强大动态及运镜能力创作高质量视频，支持文本和图片生成两种模式。",
    },
    {
      title: ["豆包·", <span className="colorText">文生图</span>, "模型"],
      icon: "/icon2.png",
      context:
        "更精美的文字理解能力，图文匹配更准确，画面效果更优美，擅长对中国文化元素的创作。",
    },
    {
      title: ["豆包·", <span className="colorText">图生图</span>, "模型"],
      icon: "/icon3.png",
      context:
        "快速生成精美写真，支持50余种风格变换，并对图片实现扩图、重绘、涂抹等创意延展。",
    },
    {
      title: ["豆包·", <span className="colorText">同声传译</span>, "模型"],
      icon: "/icon4.png",
      context:
        "提供超低延时且自然高质量的实时翻译，支持跨语言同音色翻译，打破沟通中的语言壁垒。",
    },
    {
      title: ["豆包·", <span className="colorText">语音识别</span>, "模型"],
      icon: "/icon5.png",
      context:
        "更高的准确率及灵敏度，更低的语音识别延迟，支持多语种的正确识别。",
    },
    {
      title: ["豆包·", <span className="colorText">语音合成</span>, "模型"],
      icon: "/icon6.png",
      context: "提供自然生动的语音合成能力，善于表达多种情绪，演绎多种场景。",
    },
    {
      title: [<span className="colorText">声音复刻</span>, "模型"],
      icon: "/icon7.png",
      context:
        "5秒即可实现声音1:1克隆，对音色相似度和自然度进行高度还原，支持声音的跨语种迁移。",
    },
    {
      title: ["豆包·", <span className="colorText">角色扮演</span>, "模型"],
      icon: "/icon8.png",
      context:
        "个性化的角色创作能力，更强的上下文感知和剧情推动能力，满足灵活的角色扮演需求。",
    },
    {
      title: [
        "豆包·",
        <span className="colorText">Function Call</span>,
        "模型",
      ],
      icon: "/icon9.png",
      context: "提供更加准确的功能识别和参数抽取能力，适合复杂工具调用的场景。",
    },
    {
      title: ["豆包·", <span className="colorText">向量化</span>, "模型"],
      icon: "/icon10.png",
      context:
        "聚焦向量检索的使用场景，为LLM知识库提供核心理解能力，支持多语言。",
    },
    {
      title: ["最新模型，即刻体验"],
      icon: "/icon11.png",
      context: (
        <div className="text-blue-500">
          进入模型广场 <IconRight />
        </div>
      ),
    },
    {
      title: ["更多模型，敬请期待..."],
      icon: "/icon12.png",
      context: "更强模型，更低价格，更易落地",
    },
  ];
  return (
    <div className="grid grid-cols-2 gap-4">
      {list.map(({ title, icon, context }, index) => {
        return (
          <div key={index} className="rounded-xl p-4 shadow h-40 bg-white ">
            <img src={icon} className="w-8 h-8" alt="" />
            <div className="text-sm py-2">{title}</div>
            <div className="text-xs text-gray-500">{context}</div>
          </div>
        );
      })}
    </div>
  );
};
export default CardList;
